<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<!-- 引入图标库-->
<link href="http://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<style>
    * {
          box-sizing: border-box;
      }
    #container {
        width: 300px;
        height: 42px;
        margin: 0 auto;
    }
    div.search {padding: 30px 0;}

    form {
        position: relative;
        width: 300px;
        margin: 0 auto;
    }

    input, button {
        border: none;
        outline: none;
    }

    input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
    }

    button {
        height: 42px;
        width: 42px;
        cursor: pointer;
        position: absolute;
    }


    /*搜索框6*/
    .bar6 input {
        border: 2px solid #c5464a;
        border-radius: 5px;
        background: transparent;
        top: 0;
        right: 0;
    }
    .bar6 button {
        background: #c5464a;
        border-radius: 0 5px 5px 0;
        width: 60px;
        top: 0;
        right: 0;
    }
    .bar6 button:before {
        content: "\f002";
        font-family: FontAwesome;
        font-size: 13px;
        color: #F9F0DA;
    }
    .search input{
        height: 42px;
    }


    /* 下拉框*/

    .dropbtn {
        border: none;
        cursor: pointer;
    }

    .dropdown {
        position: relative;
        display: inline-block;
        z-index: 100;
        margin-left:25px
    }

    .dropdown-content {
        display: none;
        background-color: #f9f9f9;
        min-width: 50px;
        overflow: auto;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
        z-index: 1;
    }

    .dropdown-content a {
        color: black;
        text-decoration: none;
        display: block;
    }

    .dropdown a:hover {background-color: #f1f1f1}

    .show {display:block;}

    .topbar a:hover{
        color: orange;
    }


</style>



<!--头部工具栏-->
<div class="topbar">
    <div class="container">
        <div class="topbar_nav fl">
            <ul>
                <li><a th:href="@{/web/index/}">首页</a></li>
                <li><a th:href="@{/web/couponsActivity/toCouponsActivity}">领劵中心</a></li>
                <li><a th:href="@{/web/seckill/toSearchSeckillPage}">秒杀</a></li>
                <li><a href="https://github.com/youzhengjie9/cloud-mall">项目链接</a></li>
            </ul>
        </div>


        <div class="topbar_cart fr">
            <a href="/web/cart/tocart">购物车</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/order/toOrderPage">我的订单</a>
        </div>

        <div class="topbar_cart fr">
            <a href="/web/seckill/toSeckillSuccessList">秒杀成功订单</a>
        </div>

        <div class="topbar_info fr" style="width:220px">
            <form name="logoutform" th:action="@{/web/logout/logout}" method="post"></form>
            <a class="nav-link" th:href="@{/web/register/toregister}">注册</a>
                <a class="nav-link" sec:authorize="isAnonymous()" th:href="@{/web/login/toLoginPage}">登录</a>
            <a sec:authorize="isAuthenticated()" th:if="${username ne null}"  class="nav-link dropbtn" onclick="myFunction()">[[${username}]]</a>
            <a href="#" onclick="kefu(1)">人工客服</a>
            <div class="dropdown">
                <div id="myDropdown" class="dropdown-content" style="width: 120px;height: 70px">
                    <a th:href="@{/web/center/toBaseInfo}" style="width: 100px;height: 30px;">个人中心</a>
                    <a href="javascript:document.logoutform.submit();" style="width: 100px;height: 30px;">退出登录</a>
                </div>
            </div>

        </div>

    </div>
</div>

<!--头部导航菜单-->
<div class="site_head">
    <div class="container">
        <div ng-include="'/web/index/view/log'" class="fl margin_25"></div>
        <div class="site_head_nav fl">
            <ul-box ul-items="ulItems" ul-type="nav" children-content="ulItemsContent" children-div-class="children_horizontal"></ul-box>
        </div>
        <div class="site_head_search fr margin_25">


<!--            搜索框-->
            <div id="container">
                <div class="search bar6">
                    <form method="GET" th:action="@{/web/search/toSearchPage}" autocomplete="off">
                        <input type="text" placeholder="请输入您要搜索的内容..." name="text">
                        <button type="submit"></button>
                    </form>
                </div>
            </div>

<!--            <xm-search></xm-search>-->

        </div>
    </div>
</div>

<!-- home.main-->
<div ui-view></div>

<!--footer-->
<div ng-include="'/web/index/view/footer'"></div>




<script>
    //js提交表单
    function submitData() {
        document.getElementById("form").submit();
    }

    /* 点击按钮，下拉菜单在 显示/隐藏 之间切换 */
    function myFunction() {
        document.getElementById("myDropdown").classList.toggle("show");
    }

    // 点击下拉菜单意外区域隐藏
    window.onclick = function(event) {
        if (!event.target.matches('.dropbtn')) {

            var dropdowns = document.getElementsByClassName("dropdown-content");
            var i;
            for (i = 0; i < dropdowns.length; i++) {
                var openDropdown = dropdowns[i];
                if (openDropdown.classList.contains('show')) {
                    openDropdown.classList.remove('show');
                }
            }
        }
    }

    function kefu(e) {
            $.ajax({
                url:'/web/chat/HasGotoKefu',
                dataType:'json',
                type:'get',
                success:function(result){

                    if(result==true){
                        window.location.href='http://localhost:5677/chat/toChat';
                    }else {
                        alert('当前咨询人数过多,客服都忙不过来了,请等会儿再咨询！')
                    }

                },
                error:function () {
                    alert('您可能还没有登录,请登录!')
                }
            })

    }



</script>

</html>